<template>
  <SuperTable ref="superTableRef" search pager border align="center" :columns="columns" :data-request="fetchData"
    :export-config="{}" header-title="保藏容器管理">
    <template #action>
      <Button type="primary" @click="showBoxTypeModalFn">新增冻存盒类型</Button>
    </template>
  </SuperTable>
  <BoxTypeModal v-model:show-modal="state.showBoxTypeModal" :data="state.currentData"
    @box-type-modal-ok="refreshTableFn" />
  <Modal v-model:visible="state.showPrintModal" title="打印标签">
    <Form :label-col="{ span: 9 }" :wrapper-col="{ span: 9 }">
      <a-form-item :label="$t('specimen.Box_type')" name="type">
        <Input :value="state.printData.boxSerial" :disabled="true" />
      </a-form-item>
      <a-form-item label="打印数量" name="num">
        <InputNumber min="1" v-model:value="state.printData.count" style="width: 100%" />
      </a-form-item>
    </Form>
    <template #footer>
      <Button @click="state.showPrintModal = false">取消</Button>
      <Button type="primary" @click="printFn">打印</Button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import BoxTypeModal from './components/box-type-modal.vue';
import type { TableColumnItem } from './columns';
import { VxeGridPropTypes } from 'vxe-table';
import { baseColumns } from './columns';
import { reactive, ref } from 'vue';
import { Button, message, Modal, InputNumber, Input, Form } from 'ant-design-vue';
import { boxPrint, boxDelete, boxSearch } from '@/api/base/box_data';
import { printBoxs } from '@/libs/print';

type State = {
  showBoxTypeModal: boolean;
  showPrintModal: boolean;
  currentData: any;
  printData: any;
};

/**
 * data
 */
const state: State = reactive({
  showBoxTypeModal: false,
  showPrintModal: false,
  currentData: {},
  printData: {
    boxSerial: '',
    count: 1,
  },
}) as State;

/**
 * table
 */
const superTableRef = ref<InstanceType<typeof SuperTable>>();
const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 250,
    actions: ({ row }) => [
      {
        label: '修改',
        onClick: () => {
          row.color = String(row.color);
          state.currentData = row;
          state.showBoxTypeModal = true;
        },
      },
      {
        label: '打印',
        onClick: () => {
          state.printData.boxSerial = row.serial;
          state.showPrintModal = true;
        },
      },
      {
        label: '删除',
        popConfirm: {
          title: '确认要删除该盒规格类型？',
          onConfirm: async () => {
            await boxDelete(row.id);
            message.success('删除成功！');
            refreshTableFn();
          },
        },
      },
    ],
  },
];
const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let data = superTableRef.value?.getFormModel();
  let params: API.SharedDataType = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    orderBy: [
      {
        field: 'createTime',
        order: 'desc',
      },
    ],
    ...data,
    virtualBoxId: -1,
  };
  let res = await boxSearch(params);

  return res.result;
};
const refreshTableFn = () => {
  superTableRef.value?.refreshTable();
};

/**
 * print modal
 */
const printFn = async () => {
  console.log(state.printData, 111111111);
  const res = await boxPrint(state.printData);
  let params = res.result;
  console.log(params);
  printBoxs(params);
  state.showPrintModal = false;
};
/**
 * add/edit modal
 */
const showBoxTypeModalFn = () => {
  state.currentData = {
    rows: 1,
    cols: 1,
    distance: 0,
  };
  state.showBoxTypeModal = true;
};
</script>

<style scoped lang="less"></style>
